<template>
  <div class="screen-block">
    <Title>销售额趋势</Title>
    <div style="width: 100%; height: 90%">
      <Charts :option="option" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Title from '../title.vue';
import { Charts } from '@kjgl77/datav-vue3';
const option = ref({
  xAxis: {
    splitLine: {
      show: false,
    },
    // name: '第一周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisLabel: {
      style: {
        fill: '#fff',
      },
    },
  },
  yAxis: {
    name: '销售额',
    data: 'value',
    splitLine: {
      show: false,
    },
    nameTextStyle: {
      fill: '#fff',
    },
    axisLabel: {
      style: {
        fill: '#fff',
      },
    },
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'bar',
      barWidth: 30,
      backgroundBar: {
        show: true,
      },
    },
  ],
  color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
});
</script>

<style lang="scss">
.screen-block {
  width: 100%;
  height: 100%;
}
</style>
